<template>
	<view :data-theme="themeStyle">
		<view class="content" :class="iphoneX ? 'active' : ''">
			<view class="head-wrap">
				<view class="search-wrap uni-flex uni-row">
					<view class="flex-item input-wrap">
						<input class="uni-input" maxlength="50" v-model="keyword" confirm-type="search" @confirm="search()"
							placeholder="请输入您要搜索的店铺" />
						<text class="iconfont iconIcon_search" @click.stop="search()"></text>
					</view>
				</view>

				<view class="sort-wrap">
					<view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }"
						@click="sortTabClick('')">
						<text :class="{ 'color-base-text': orderType === '' }">{{ $lang('all') }}</text>
					</view>
					<view :class="{ 'color-base-text': orderType === 'shop_sales' }" @click="sortTabClick('shop_sales')">{{
						$lang('sale') }}</view>
					<view :class="{ 'color-base-text': orderType === 'shop_desccredit' }"
						@click="sortTabClick('shop_desccredit')">{{ $lang('desccredit') }}</view>
				</view>
			</view>

			<mescroll-uni top="180" ref="mescroll" @getData="getShopList">
				<block slot="list">
					<view>
						<view v-if="shopList.length" class="line">

						</view>
						<view @click="jump('/otherpages/shop/index/index?site_id=' + item.site_id)" class="shop-box"
							v-for="(item, index) in shopList" :key="index">
							<view class="avatar">
								<image v-if="item.avatar" :src="$util.img(item.avatar)" @error="imgError(index)"
									mode="aspectFit"></image>
								<image v-else :src="$util.getDefaultImage().default_shop_img" mode="aspectFit" />
							</view>
							<view class="shop-desc">
								<view class="name-box">
									<view class="shop-name">
										{{ item.site_name }}
									</view>
									<text class="color-tip" style="font-size: 22rpx;">{{ $lang('distance') }}{{
										item.distance | distance }}</text>
								</view>
								<view class="rate-box">
									<image class="icon-star margin-right" :src="$util.img('upload/uniapp/start.png')"
										mode=""></image>
									<view class="score">{{ item.composite_score }}{{ $lang('score') }}</view>
								</view>
								<view class="shop-content color-tip margin-top">
									<view class="shop-content-left">
										<text>{{ $lang('main') }}：{{ item.category_name }}</text><text
											style="margin-left: 31rpx;">有{{ item.sub_num }}人关注</text>
									</view>
								</view>
							</view>
						</view>
						<view class="empty" v-if="!shopList.length">
							<ns-empty text="当前街上没有店铺哦"></ns-empty>
						</view>
					</view>
				</block>
			</mescroll-uni>
			<loading-cover ref="loadingCover"></loading-cover>
			<!-- 底部tabBar -->
			<!-- #ifdef MP-WEIXIN -->
			<!-- 小程序隐私协议 -->
			<privacy-popup ref="privacyPopup"></privacy-popup>
			<!-- #endif -->
			<diy-bottom-nav></diy-bottom-nav>
		</view>
	</view>
</template>

<script>
import globalConfig from '@/common/js/golbalConfig.js';
import street from '../public/js/street.js';
import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
import sxRate from '@/otherpages/components/sx-rate/index.vue'

export default {
	components: {
		diyBottomNav,
		sxRate
	},
	data() {
		return {};
	},
	computed: {
		themeStyle() {
			return 'theme-' + this.$store.state.themeStyle
		},
		starColor() {
			return this.$store.state.baseColor
		}
	},
	mixins: [street, globalConfig],
	filters: {
		distance(distance) {
			if (distance < 1000) return distance + 'm';
			else return (distance / 1000).toFixed(2) + 'km';
		}
	}
};
</script>

<style lang="scss">
@import '../public/css/street.scss';
</style>

<style lang="scss">
/deep/ .uni-scroll-view-content {
	background: #ffffff;
}

.content /deep/ .mescroll-upwarp {
	padding-bottom: 150rpx;
}

.content.active /deep/ .mescroll-upwarp {
	padding-bottom: 220rpx;
}</style>
